<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" label-width="70px"  slot="form" label-position="left">          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="选择班级">
                           <el-select v-model="formInline.typeClass" placeholder="请选择班级" style="width:100%" @change="queryClassType">
                                <el-option v-for="item in formInline.classList" :key="item.pId" :label="item.sNickName" :value="item.pId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="考试类型">
                             <el-select v-model="formInline.typeExam" placeholder="请选择考试类型" style="width:100%">
                                <el-option v-for="item in examTypeList" :key="item.examTypeId" :label="item.examTypeName" :value="item.examTypeId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">                     
                        <el-form-item label="考试开始日期" label-width="100px">
                            <el-row>  
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center" class="lineH">至</el-col>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.endDate" type="date" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2"  @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col> 
                            </el-row>   
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                </div>

                <!-- <div class="formBtn">
                    <div class="btnPosition">
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </div>
                </div> -->
            </el-form>

            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="goToPublish">成绩发布</el-button>
                </div>
            </div>

            <el-table :data="AnnounceList" border style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">
                <el-table-column label="学校" align="center"  prop="schoolName" min-width="200">
                </el-table-column>
                <el-table-column label="班级" align="center"  prop="className">
                </el-table-column>
                <el-table-column label="考试开始日期" align="center" prop="sStartTime" min-width="120">
                    <template scope = "scope">
                        {{scope.row.sStartTime | topraseTime}}
                    </template>
                </el-table-column>
                <el-table-column label="考试类型" align="center" prop="examTypeName" >
                </el-table-column>
                <el-table-column label="科目" align="center" prop="sSubjectNames" min-width="200">
                    <template scope = "scope">
                        {{scope.row.sSubjectNames || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="考试人数" align="center" prop="sTotalNum" >
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="goToDetail(scope.row)">查看详情</el-button>
                        <el-button type="text" class="btn-success" @click="delRecord(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination 
                    layout="total, sizes, prev, pager, next, jumper" 
                    :total="listQuery.total" 
                    :current-page.sync="listQuery.page" 
                    :page-sizes="config.pageSizes" 
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import { listSchoolByName, queryListClassById, listExamType, queryListScoreByPage, deleteExamAndScores} from 'api/gradeManagement';
// import {listSchoolByName, queryListClassById, queryListTestTypeById, queryListScoreByPage} from 'api/gradeManagement';
import moment from 'moment';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import region from 'components/CascadeRegion/region';
export default {
    name: 'gradeInquiryList',
    components: { TableLayout, region},
    data() {
        return {
            loading: true,
            getSchool: '',
            formInline: {// form表单数据
                schoolName: '', // 学校名称
                typeClass: '', // 选择班级
                typeExam: '', // 考试类型
                startDate: '', // 注册开始时间
                endDate: '', // 注册结束时间
                pickerOptions1: {},
                pickerOptions2: {},
                classList: []
            },
            schoolNameList: [],
            classList: [],
            examTypeList: [],

            AnnounceList: [],
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 10
            },
            dialog: {
                dialogFormVisible: false
            },
            dataForm: {
            },
            multipleSelection: [], // 勾选的表格的项目
            schoolLoading: false,
            subjectLoading: false
        }
    },
    filters: {
        filterCreateTime(val) {
            // console.log(val);
            return val.substring(0, val.length-8); 
        },
        topraseTime(val) {
            if (val) {
                return val.substring(0, val.length-8);
                // return moment(val).format('YYYY-MM-DD');
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'uid', 
            'schoolId', 
            'schoolName', 
            'schoolType'
        ])
    },
    // 初始化
    created() {
        this.getSchool = this.schoolId;
        this.formInline.schoolName = this.getSchool;
        this.queryAllClass(this.getSchool);
        this.queryClassType();
        this.searchFetchData();

    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 开始日期選擇
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    // console.log('fd1', time.getTime())
                    return time.getTime() < new Date(date).getTime() - 864e5;
                }
            }
        },
        // 结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    // console.log('fd2', new Date(date).getTime())
                    return time.getTime() > new Date(date).getTime();
                }
            }
        },
        // 跳转到 发布页面
        goToPublish() {
            // this.$router.push({ path: '/jioaXueManage/gradePublish' });
            this.$router.push('gradePublish');
        },
        // 点击查询 
        onSubmit() {
            this.loading = true;
            this.listQuery.page = 1;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {

            
            let startDate = this.formInline.startDate==''?'':moment(this.formInline.startDate).format('YYYY-MM-DD')+' 00:00:00';// 开始时间格式处理
            let endDate = this.formInline.endDate==''?'':moment(this.formInline.endDate).format('YYYY-MM-DD')+' 23:59:59';// 结束时间格 式处理
            let curPage = this.listQuery.page;
            let pageSize = this.config.pageSize;
            let schoolName = this.formInline.schoolName;
            let typeClass = this.formInline.typeClass;
            let examType = this.formInline.typeExam;

            // console.log('------------------------------', curPage, pageSize, schoolName, typeClass, examType, startDate, endDate);
            queryListScoreByPage(curPage, pageSize, schoolName, typeClass, examType, startDate, endDate).then(res => {
                this.AnnounceList = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
                this.loading = false;
            });
        },
        // 跳转到 详情页
        goToDetail(row) {
            this.$router.push({ 
                path: `gradeDetail/${row.pId}/${row.fSchoolId}` 
                // params: { 
                //     pId: row.pId,
                //     fSchoolId: row.fSchoolId
                // } 
            });
        },
        // 删除记录
        delRecord(row) {
            this.$confirm('确定删除该成绩？', '', {
                closeOnClickModal: false,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ',
                title: ' '
            }).then(() => {
                deleteExamAndScores(row.pId).then((res) => {
                    this.searchFetchData();
                });
            }).catch((e) => {
                this.$message.info('已取消删除');     
            });
            
        },
         // 学校名称模糊搜索
        remoteMethod(query) {
            if (query !== '') {
                this.schoolLoading = true;
                setTimeout(() => {
                    this.schoolLoading = false;
                    listSchoolByName(query).then(response => {
                        this.schoolNameList = response.data.content;
                    });
                }, 200);
            } else {
                this.formInline.schoolName = '';
            }
        },
        // 班级列表
        queryAllClass(schoolId) {
            this.formInline.typeClass = '';
            queryListClassById(schoolId ? schoolId : null).then(res => {
                this.formInline.classList = res.data.content;

                if (this.formInline.classList) {
                    this.formInline.classList.unshift({ sNickName: '请选择' });
                } 

                this.loading = false;
            });
        },
        // 考试类型
        queryClassType() {
            listExamType().then(res => {
                this.examTypeList = res.data.content;

                if (this.examTypeList) {
                    this.examTypeList.unshift({ examTypeName: '请选择' });
                } 

                this.loading = false;
            });
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../../styles/var';
.el-message-box__message {
    p {
        font-size: 18px;
        color: #333;
        text-align: center;
    }
}
.el-message-box__btns {
    text-align: center;
}
.content {
    position: relative;
    padding: 0px;
    $bgcolor: #fff;
    .formInline {
        .lineH{
            line-height: 36px;
        }
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                left: 0px;
                top: 18px;
            }
        }
    }
}
</style>